<template>

  <div>
    <div id='addnewAddress' v-show="xinjianshow">
      <div id="xiugaidizhi">
        <div class="xiugaidizhi_list">
          <ul>
            <li><span>姓名</span> <input type="text" value="" v-model="addressName" class="saveHistory" ref="namesss" v-on:blur="changeName()"></li>
            <li><span>手机号码</span> <input type="text" value="" v-model="phoneNum" ref="numsss" v-on:blur="changeNum()"></li>
            <li @click="resetAddress()" style="overflow: hidden"><span>所在地区</span><span
              class="suozaidiqu">{{suozaidiqu}}</span><img
              src="../assets/gengduo.png" alt="" style="float: right;margin-right: 4rem;position: relative;top: 2rem">
            </li>
            <li style="border-bottom: 0px"><span>详细地址</span> <input type="text" value="" v-model="xiangxiAddress"
                                                                    style="height: 6rem;line-height: 6rem;font-size: 1.6rem"
                                                                    placeholder="请填写详细地址"></li>

          </ul>
        </div>

        <div class="xiugaidizhi_list_btn">
          <button @click="saveBtns()">保存</button>
        </div>
      </div>


      <div class="tishi" v-show="tishi">
        <p>{{warnMessage}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'five',
    data() {
      return {
        AuthTokenThree: '',
        xinjianshow: true,
        xinjianWrap: false,
        one: true,
        two: false,
        three: false,
        showContent: true,
        arrAddress: [],
        arrAddress2: [],
        arrAddress3: [],
        firstname:this.$route.query.firstname,
        secondname: this.$route.query.secondname,
        threename: this.$route.query.threename,
        id: this.$route.query.id,
        ider: this.$route.query.ider,
        idsan:this.$route.query.idsan,
        addressName: '',
        phoneNum: '',
        suozaidiqu:this.$route.query.firstname+this.$route.query.secondname+this.$route.query.threename,
        xiangxiAddress: '',
        tishi: false,
        time: 2000,
        warnMessage: ''
      }
    },
    created(){
      this.AuthTokenThree = sessionStorage.getItem('AuthToken');
      console.log(this.AuthTokenThree);
      // var that=this;
      this.addressName=this.$route.query.aaa
      this.phoneNum=this.$route.query.bbb

      if(!this.suozaidiqu){
        this.suozaidiqu='';
      }else {
      }
    },

    methods:{
      changeNum(){
        console.log(this.$refs.numsss.value)
        this.phoneNum=this.$refs.numsss.value
      },
      changeName(){
        console.log(this.$refs.namesss.value)
        this.addressName=this.$refs.namesss.value
      },
      resetAddress() {
        var that=this;
        that.$router.push({path:'/fourth',query:{names:this.addressName,nums:this.phoneNum}})
      },
      saveBtns() {
        // alert(111)
        var that = this;
        if (that.addressName == '' || that.phoneNum == '' || that.xiangxiAddress == '') {
          // alert('请填写完整信息！')
          that.tishi = true;
          that.warnMessage = '请填写完整信息！';
          window.setTimeout(function () {
            that.tishi = false
          }, that.time);
        } else {
          axios.post('http://test.zjapi.xianxiangle.com/address_save',{
            AuthToken:that.AuthTokenThree,
            name: that.addressName, // 收货人
            mobile: that.phoneNum,  //(string) 手机号码
            province_id: that.id,       //(integer) 省级ID
            city_id:that.ider,         //(integer)市级ID
            area_id: that.idsan,     //(integer)县级ID
            address: that.xiangxiAddress, //(string) 详细收货地址
            province:that.firstname,          //(string) 省份名称
            city:that.secondname,            //(string) 城市名称
            area:that.threename,             //(string) 区县名称
            from:'homepage'
          }).then(function (res) {
            console.log(res);
            // console.log(res.data.message);
            that.tishi = true;
            that.warnMessage=res.data.message;
            window.setTimeout(function () {
              that.tishi = false;
              that.$router.push({path:'/third'})
            }, that.time);
          }).catch(function (err) {
          })

        }
      }
    },
    computed:{

    }
//   components: {
//     AppHeader
//   }
  }
</script>

<style lang="scss" scoped>
  #addnewAddress {
    width: 100%;
    //display: none;
    margin: auto;
    #xiugaidizhi {
      width: 100%;
      margin: auto;

      .xiugaidizhi_list {
        width: 100%;
        ul {
          width: 100%;
          background: white;
          border-top: 1px solid #ccc;
          overflow: hidden;
          li {
            width: 100%;
            height: 6rem;
            line-height: 6rem;
            //border: 1px solid;
            font-size: 2rem;
            color: #666666;
            padding-left: 1rem;
            //font-weight: 600;
            margin-left: 1rem;
            border-bottom: 1px solid #ccc;
            /*display: flex;*/
            //overflow: hidden;
            text-align: left;
            .suozaidiqu {
              margin-left: 2rem;
            }
            img {
              width: 1.2rem;
              height: 1.6rem;
            }
            input {
              width: 60%;
              outline: none;
              border: 0;
              font-size: 1.6rem;
              position: relative;
              left: 1rem;
            }

          }
        }
      }
      .xiugaidizhi_list_btn {
        width: 100%;
        text-align: center;
        margin-top: 3rem;
        button {
          width: 96%;
          height: 4rem;
          line-height: 4rem;
          text-align: center;
          background: #32D69C;
          color: white;
          font-size: 1.8rem;
          border-radius: 3rem;
          outline: none;
          border: 0;
        }
      }
    }
  }

  .tishi {
    width: 60%;
    height: 3rem;
    line-height: 3rem;
    background: #666666;
    //border: 1px solid #cccccc;
    position: relative;
    //bottom: 2rem;
    top: 1rem;
    color: white;
    text-align: center;
    //bottom: 16rem;
    border-radius: 3rem;
    /*display: none;*/
    margin: auto;
    p {
      height: 3rem;
      line-height: 3rem;
      //font-size: 1.6rem;
      margin: auto;
    }
  }

</style>
